<template>
    <div class="achievements-wrap" v-wechat="$route.meta.title">
        <div class="achievements-header">
            <van-cell-group>
                <van-cell class="title" :value="$t('message.cg-title')"/>
                <van-cell :value="`${$t('message.cglx')}：${form.releaseName}`"/>
            </van-cell-group>
        </div>

        <!-- 成果名称 -->
        <div class="achievements-box achievements-form">

            <div class="title-box">
                <h6>{{$t('message.cgmc')}}</h6>
            </div>

            <van-cell-group>
                <van-cell :title="$t('message.chinese')" :value="form.releaseTitleCn"/>
                <van-cell v-if="form.releaseTitleEn!=='-'" :title="$t('addMsg.ywmc')" :value="form.releaseTitleEn"/>
            </van-cell-group>

        </div>

        <!-- 合同/协议基本情况 -->
        <div class="achievements-box achievements-form">

            <div class="title-box">
                <h6>{{$t('message.cgjj')}}</h6>
            </div>

            <van-cell-group>

                <!-- 成果发布单位（中文） -->
<!--                <van-cell :title="$t('addMsg.cgfbdwz')" :value="form.releaseCom"/>-->

                <!-- 成果发布单位（英文） -->
<!--                <van-cell :title="$t('addMsg.cgfbdyz')" value="-"/>-->

                <!-- 发布日期 -->
                <van-cell :title="$t('message.fbrq')" :value="form.releaseTime"/>

                <!-- 发布地区 -->
                <van-cell :title="$t('message.fbdq')" :value="form.border"/>

                <!-- 国内（省） -->
                <van-cell v-if="form.border === '境内' || form.border === 'Domestic'" :title="$t('message.gndq')" :value="form.provinceName"/>

                <!-- 国内（市） -->
                <van-cell v-if="form.border === '境内' || form.border === 'Domestic'" title=" " :value="form.cityName"/>

                <!-- 国外 -->
                <van-cell v-if="form.border === '境外' || form.border === 'Overseas'" :title="$t('message.gbdq')" :value="form.regionName"/>

                <!-- 中方企业属地 -->
                <van-cell v-if="form.border === '境外' || form.border === 'Overseas'" :title="$t('lackMsg.zfqysd')" :value="form.attributionProvince"/>

                <!-- 发布层级 -->
                <van-cell :title="$t('message.fbcj')" :value="form.releaseLevelName"/>

                <!-- 发布内容 -->
                <van-cell class="achievements-textarea float-left" :title="$t('message.fbnr')" :value="form.releaseContent"/>

                <!-- 文件 -->
                <van-cell v-if="form.ossUrlList && form.ossUrlList.length">
                    <down-load :pfileList="form.ossUrlList"></down-load>
                </van-cell>

            </van-cell-group>

        </div>

        <!-- 行业领域 -->
        <div class="achievements-box achievements-form">

            <div class="title-box">
                <h6>{{$t('message.hyly')}}</h6>
            </div>

            <van-cell-group>
                <!-- 行业领域 -->
                <van-cell :title="$t('message.hyly')" :value="form.releaseLevel"/>
                <van-cell v-if="form.releaseFieldThree.includes('qt') || form.releaseFieldTwo.includes('qt')" :title="$t('message.hyly')" :value="form.releaseFieldOther"/>
            </van-cell-group>

        </div>

        <!-- 填表人信息 -->
        <div class="achievements-box achievements-form">

            <div class="title-box">
                <h6>{{$t('message.txrxx')}}</h6>
            </div>

            <van-cell-group>
                <!-- 填表人 -->
                <van-cell :title="$t('message.tbr')" :value="form.userName"/>
                <!-- 联系人手机号 -->
                <van-cell :title="$t('message.lxdh')" :value="form.userPhone"/>
                <!-- 座机号码 -->
                <van-cell :title="$t('message.zjhm')" :value="form.landlineNumber"/>
            </van-cell-group>

        </div>

        <div class="achievements-footer">
            <van-button type="primary" size="large" color="linear-gradient(90deg, #FFB301 0%, #FE8C01 100%)" round @click="routerachTraceDetail" v-if="isShowTrackingetails">
                {{$t('lackMsg.ckzzxq')}}
            </van-button>
            <van-button size="large" round @click="routerHome">{{$t('addMsg.ffsy')}}</van-button>
        </div>

    </div>
</template>

<script>
    import downLoad from '@/components/downLoad.vue'
    import buried from '@/utils/buried'

    export default {
        components: { downLoad },
        data () {
            return {
                form: {
                    releaseName: '-', // 成果类型
                    releaseTitleCn: '-', // 中文名称
                    releaseTitleEn: '-', // 英文名称
                    releaseCom: '-', // 成果发布单位（中文）
                    releaseTime: '-', // 发布日期
                    border: '-', // 发布地区
                    releaseLevelName: '-', // 发布层级
                    releaseContent: '-', // 发布内容
                    releaseLevel: '-', // 行业领域
                    userName: '-', // 填表人
                    userPhone: '-', // 填表人手机号
                    landlineNumber: '-', // 座机号码
                    releaseFieldThree: '-',
                    releaseFieldTwo: '-'
                },
                isShowTrackingetails: false // 是否显示最总详情
            }
        },
        computed: {
            regionType () { // 发布地区列表
                const regionType = this.$store.state.regionType // 获取发布地区列表
                return regionType ? regionType.map(item => ({
                    text: item.label,
                    value: item.value
                })) : []
            },
            query () {
                return this.$route.query
            },
            id () {
                return this.query.id
            }
        },
        mounted () {
            // console.log(this.id)
            this.getDetailInfo()
            buried('M_result_achievement', 'achievement_detail')
        },
        methods: {
            // 根据 ID 获取详情信息
            async getDetailInfo () {
                const res = await this.$axios.get('/api/releaseResult/getReleaseResult', { id: this.id })
                const { data } = res
                if (data.code === 200) {
                    this.form = {
                        ...data.data,
                        releaseName: data.data.releaseName || '-', // 成果类型
                        releaseTitleCn: data.data.releaseTitleCn || '-', // 中文名称
                        releaseTitleEn: data.data.releaseTitleEn || '-', // 英文名称
                        releaseCom: data.data.releaseCom || '-', // 成果发布单位（中文）
                        releaseTime: data.data.releaseTime || '-', // 发布日期
                        border: data.data.border || '-', // 发布地区
                        releaseLevelName: data.data.releaseLevelName || '-', // 发布层级
                        releaseContent: data.data.releaseContent || '-', // 发布内容
                        releaseLevel: data.data.releaseLevel || '-', // 行业领域
                        userName: data.data.userName || '-', // 填表人
                        userPhone: data.data.userPhone || '-', // 填表人手机号
                        landlineNumber: data.data.landlineNumber || '-' // 座机号码
                    }
                    this.regionType && this.regionType.some(item => {
                        if (item.value === this.form.border) {
                            this.form.border = item.text
                            return true
                        }
                    })
                    // console.log(data.data.ossUrlList)
                    // 发布层级
                    this.form.releaseLevel = data.data.releaseFieldOneName
                    if (data.data.releaseFieldTwoName) this.form.releaseLevel += ` - ${data.data.releaseFieldTwoName}`
                    if (data.data.releaseFieldThreeName) this.form.releaseLevel += ` - ${data.data.releaseFieldThreeName}`
                    // 中方企业属地
                    this.form.attributionProvince = data.data.attributionProvinceName || '-'
                    if (this.form.attributionProvince !== '-') this.form.attributionProvince += ` - ${data.data.attributionCityName}`

                    // 是否显示追踪详情
                    switch (data.data.approvalStatus) {
                        case 'shzt07':
                            this.isShowTrackingetails = true
                            return
                        case 'shzt08':
                            this.isShowTrackingetails = true
                            return
                        case 'shzt09':
                            this.isShowTrackingetails = true
                            return
                        case 'shzt10':
                            this.isShowTrackingetails = true
                            return
                        default:
                            this.isShowTrackingetails = false
                            return
                    }

                } else {
                    this.$toast(this.$t('message.hxxxsb'))
                }
            },
            routerachTraceDetail () {
                this.$router.push({
                    path: '/achTraceDetail',
                    query: {
                        id: this.id
                    }
                })
            },
            routerHome () {
                this.$router.push({
                    path: '/home'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .achievements-wrap {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        /*background: rgba(243, 246, 250, 1);*/
        padding: 15px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .achievements-box {
        padding: 15px;
        background: #fff;
        margin-top: 18px;
        border-radius: 4px;
    }

    .title-box {
        display: flex;
        align-items: center;
        height: 44px;
        /*line-height: 44px;*/

        h6 {
            font-weight: 500;
            color: rgba(33, 33, 33, 1);
            display: flex;
            align-items: center;

            &:before {
                content: "";
                width: 4px;
                height: 15px;
                margin-right: 6px;
                background: #FE8B01;
                display: inline-block;
                vertical-align: top;
            }
        }
    }

    .achievements-footer {
        padding: 15px;

        .van-button {
            margin-top: 15px;

            &.van-button--default {
                border-color: #CCCFD4;
            }
        }
    }
</style>
